<template>
  <el-container class="main_con">
    <!-- <div class="filter_con ds_block">
      <el-button type="primary" size="medium" @click="addItem">新增自定义表单</el-button>
     </div> -->
    <div class="list_con">
      <el-table :data="list">
        <el-table-column prop="template_id" label="表单模板ID"></el-table-column>
        <el-table-column label='用户'>
          <template slot-scope="scope" >
          <div class="user" v-if="scope.row.user">
            <div class="face"><vimage :src="scope.row.user.picurl" style="width:50px;height:50px;display:block;border-radius:50%;"></vimage></div>
            <div class="info">
              <div class="name" :title="scope.row.user.nickname">{{scope.row.user.nickname}}</div>
            </div>
          </div>
             </template>
        </el-table-column>
        <!-- <el-table-column prop="title" label="表单名称"></el-table-column> -->
        <el-table-column label="操作">
          <template  slot-scope="scope">
            <el-button type="text" @click='ShowHandle(scope.row)'>查看</el-button>
            <!-- <el-button type="text" @click='DelHandle(scope.row.id)'>删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="justify-content: flex-end;">
        <el-pagination @current-change="ChangeCurrent" class="pages" background layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="show" destroy-on-close width="500px">
      <el-form  label-position="top">
        <el-form-item :label="item.title" v-for="(item,i) in answerdetial" :key='i'>

            <template v-if="item.type=='img'">
              <vimage style="width:100px;margin-right: 10px;" v-for="(data,i) in item.value" :src="data"></vimage>
            </template>
            <template v-else><span>{{item.value}}</span></template>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import {answerlist} from '@/api/mall/systemform'
  export default{
    data(){
      return{
        page:1,
        size:10,
        list:[],
        total:1,
        answerdetial:[],
        show:false
      }
    },
    mounted() {
      if (this.$route.query && this.$route.query.id) {
        this.id = this.$route.query.id;
         this.getlist()
      }else{
        this.$router.push('/systemform/list')
      }

    },
    methods:{
      addItem(){
          this.$router.push('/systemform/item');
      },
      getlist(){
        answerlist(this.id,this.page,this.size).then(res=>{
        this.list=res.msg.data
        this.total=res.msg.total
        })
      },
      ShowHandle(data){
        this.show=true;
        this.answerdetial=data.answer;
        // this.$route.push({})
      },
      DelHandle(id){
        let _this = this
        this.$confirm('确认删除？')
          .then(_ => {

            delform(id).then(res => {
              _this.getlist()
            })
          })
          .catch(_ => {});
      },
      //切换页码
      ChangeCurrent(page) {
        this.page = page;
        this.getlist()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user{
    display: flex;

    .info{
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      justify-content: center;
      .name{
        display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
        overflow: hidden; /*超出的文本隐藏*/
        text-overflow: 'ellipsis'; /* 溢出用省略号*/
        -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
        margin-bottom: 5px;
      }
    }
  }
</style>
